import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert, FlatList, RefreshControl, ActivityIndicator} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, List, Tabs, Toast} from '@ant-design/react-native';
import Item from '@ant-design/react-native/lib/list/ListItem';
import {getSpCardListByPriceDiscount} from '~/api/product';
import {getHttpUrl} from '~/api/basic';
import {getParkingFavoriteList, getParkingOrderList, getParkingViewList} from '~/api/parking';
import Developpark from '~/components/developpark';
let pagecount = 0;
let index = 1;
let size = 10;
export default class GiftMoreList extends Component {
    static navigationOptions = {
        title: '更多商品列表',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            id: this.props.navigation.getParam('params'),
            productParamID: this.props.navigation.getParam('productParamID'),
            list: [],
            baseurl: '',
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
        };
        console.disableYellowBox = true;
        getHttpUrl().then((r) => {
            if (r.code === 0) {
                this.setState({
                    baseurl: r.data,
                });
            }
        });
        this.getcardlist();
    } //
    getcardlist() {
        getSpCardListByPriceDiscount({
            is_gift: true, // 固定
            page_index: this.state.page_index, //页号码
            page_size: this.state.page_size, // 每页数量
            condidate: {key_word: ''}, //商品名称关键字
            paramid: this.state.productParamID, //商品属性ID，当前套餐商品的前个接口中有此量 ProductParamID
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.page_data.list,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.page_data.total_page_count;
                    this.setState({
                        footer: r.data.page_data.total_item_count === 0 ? 2 : 0,
                    });
                }
            } else {
                console.log(r.msg);
            }
        });
    }
    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.getcardlist();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    getSpCardListByPriceDiscount({
                        is_gift: true, // 固定
                        page_index: this.state.page_index, //页号码
                        page_size: this.state.page_size, // 每页数量
                        condidate: {key_word: ''}, //商品名称关键字
                        paramid: this.state.productParamID, //商品属性ID，当前套餐商品的前个接口中有此量 ProductParamID
                    }).then((r) => {
                        if (r.code === 0) {
                            dataArray = r.data.page_data.list;
                            dataArray = this.state.list.concat(dataArray);
                            this.setState({
                                list: dataArray,
                                isLoading: false,
                            });
                        } else {
                            console.log(r.msg);
                        }
                    });
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <Flex style={{width: '50%'}} justify={'center'}>
                <Flex
                    onPress={() => {
                        this.props.navigation.push('GiftInfo', {
                            params: item.ProductDataID,
                        });
                    }}
                    direction={'column'}
                    style={{
                        width: '94%',
                        marginTop: 10,
                        backgroundColor: 'white',
                        padding: 11.5,
                        borderRadius: 10,
                    }}>
                    <View style={{position: 'absolute', left: 0}}>
                        <Image style={{width: 41, height: 41, resizeMode: 'contain', zIndex: 2}} source={require('~/assets/public/changed.png')} />
                    </View>
                    <Image
                        style={{width: '100%', aspectRatio: 1 / 1}}
                        source={{uri: this.state.baseurl + '/Product/' + item.ProductDataID + '/3/' + item.FileName}}
                    />
                    <View style={{height: 86, width: '100%'}}>
                        <Text numberOfLines={2} style={{fontSize: 12, color: '#393C46', fontWeight: 'Medium', height: 32, marginTop: 9}}>
                            {item.ProductName}
                        </Text>
                        <Text style={{fontSize: 12, color: '#FF0700', marginTop: 9, fontWeight: 'Semibold'}}>￥{item.PriceMarket.toFixed(2)}</Text>
                        <Flex style={{width: '100%', marginTop: 10}} justify={'between'} align={'start'}>
                            <Text style={{fontSize: 12, color: '#90969E'}}>销量：{item.TotalSell + item.SellBase}</Text>
                            <Text style={{fontSize: 12, color: '#90969E'}}>库存：{item.TotalStock}</Text>
                        </Flex>
                    </View>
                </Flex>
            </Flex>
        );
    }
    render() {
        return (
            <Flex style={{width: '96%', marginLeft: '2%', marginRight: '2%'}}>
                <FlatList
                    data={this.state.list}
                    numColumns={2}
                    showsVerticalScrollIndicator={false}
                    renderItem={(data) => this._renderItem(data.item)}
                    keyExtractor={(item, index) => index}
                    ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                    onEndReached={() => {
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                    refreshing={true}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._onRefresh();
                            }}
                        />
                    }
                />
            </Flex>

            // <ScrollView style={{flex: 1}}>
            //     <Flex justify={'around'} align={'start'} wrap={'wrap'}>
            //         {this.state.list.map((item) => {
            //             return (
            //                 <Flex
            //                     onPress={() => {
            //                         this.props.navigation.push('GiftInfo', {
            //                             params: item.ProductDataID,
            //                         });
            //                     }}
            //                     direction={'column'}
            //                     style={{
            //                         width: '46%',
            //                         marginTop: 10,
            //                         backgroundColor: 'white',
            //                         padding: 11.5,
            //                         borderRadius: 10,
            //                     }}>
            //                     <View style={{position: 'absolute', left: 0}}>
            //                         <Image
            //                             style={{width: 41, height: 41, resizeMode: 'contain', zIndex: 2}}
            //                             source={require('~/assets/public/changed.png')}
            //                         />
            //                     </View>
            //                     <Image
            //                         style={{width: '100%', aspectRatio: 1 / 1}}
            //                         source={{uri: this.state.baseurl + '/Product/' + item.ProductDataID + '/3/' + item.FileName}}
            //                     />
            //                     <View style={{height: 86, width: '100%', marginTop: 10}}>
            //                         <Text numberOfLines={2} style={{fontSize: 12, color: '#393C46'}}>
            //                             {item.ProductName}
            //                         </Text>
            //                         <Text style={{fontSize: 12, color: '#FF0700', marginTop: 10}}>￥{item.PriceMarket.toFixed(2)}</Text>
            //                         <Flex style={{width: '100%', marginTop:10}} justify={'between'} align={'start'}>
            //                             <Text style={{fontSize: 12, color: '#90969E'}}>销量：{item.TotalSell + item.SellBase}</Text>
            //                             <Text style={{fontSize: 12, color: '#90969E'}}>库存：{item.TotalStock}</Text>
            //                         </Flex>
            //                     </View>
            //                 </Flex>
            //             );
            //         })}
            //     </Flex>
            // </ScrollView>
        );
    }
}

const styles = StyleSheet.create({});
